import React from 'react'
// import SiderMenu from './SiderMenu'
import BaseMenu from './BaseMenu'
import SystemMenu from './SystemMenu'
import { getFlatMenus } from './utils'

import memoizeOne from 'memoize-one'
import isEqual from 'lodash/isEqual'
import { checkRouteAuth } from '@/components/Authorized'

const formatter = (data, authorities) => {
    return (data || []).map(item => {
        const _item = {
            ...item
        }
        if (item.routes) {
            const children = formatter(item.routes, authorities)
            _item.children = children
        }
        delete _item.routes
        return _item
    })
    .filter(item => item && item.name && item.path)
    .filter(item => checkRouteAuth(authorities)(item.authority))
}
export const formatterData = memoizeOne(formatter, isEqual)

const SiderMenuWrapper = React.memo(props => {
	const {
		menu,
		system
	} = props
	const flatMenus = getFlatMenus(menu, item => item.system === system)
	const flatMenuKeys = Object.keys(flatMenus)
	const SiderMenu = system ? SystemMenu : BaseMenu
	return (
		<SiderMenu {...props} flatMenuKeys={flatMenuKeys} flatMenus={flatMenus}></SiderMenu>
	)
})

export default SiderMenuWrapper